<template>
	<view class="mainpadding">

		<template v-if="show==false">
			<!-- #ifdef APP-PLUS -->
			<map id="myMap" style="width: 100%;height: 600rpx;" :longitude="longitude" :latitude="latitude" scale="13"
				:markers="markers" :polygons="polygons">
			</map>
			<!-- #endif -->
			<view class="flexcolumn" style="margin-top: 50rpx;">
				<view class="xiaolv flexcenter bold" style="font-size: 50rpx;height: 365rpx;"
					v-if="dataAll.data_type==2 && dataAll.is_dk==0">今日打卡已完成</view>
				<!-- <view class="xiaolv bold flexcenter" style="font-size: 50rpx;height: 365rpx">今日打卡已完成</view> -->
				<view class="yyztradius flexcolumn" style="width: 365rpx;height: 365rpx;background-color: #fff;" v-else
					@click="startdaka()">
					<!-- <view class="yyztradius flexcolumn" style="width: 365rpx;height: 365rpx;background-color: #fff;" > -->
					<view class="xiaohei bold" style="font-size: 50rpx;">
						{{dataAll.data_type==1?"上班打卡":dataAll.data_type==2?"下班打卡":"临时打卡"}}
					</view>
					<view class="xiaohei margin_top2 bold" style="font-size: 40rpx;">{{dataAll.dktime}}</view>
					<!-- <view class="xiaohei margin-top bold" style="font-size: 40rpx;">{{thetime}}</view> -->
					<view class="xiaohui ershiba margin_top1">请在{{dataAll.allow_starttime}}至{{dataAll.allow_endtime}}内打卡
					</view>
				</view>
				<view class="xiaohui titletext margin_top5" style="text-decoration: underline;" @click="getloaction">
					刷新定位</view>
			</view>
			<view class="flexbetween">
				<view class="xiaohei mainpadding_top ershiba bold ffffff flexbetween radius"
					@click="jumpurl('/pages/tab4/kaoqindk/lishikq')" style="width: 45%;">
					<view class="">历史考勤</view>
					<u-icon name="arrow-right" color="#333" size="12"></u-icon>
				</view>
				<view class="xiaohei mainpadding_top ershiba bold ffffff flexbetween radius" style="width: 45%;"
					@click="jumpurl('/pages/tab4/kaoqindk/qingjiasq')">
					<view class="">请假申请</view>
					<u-icon name="arrow-right" color="#333" size="12"></u-icon>
				</view>
			</view>
			<view class="flexbetween">
				<view class="xiaohei mainpadding_top ershiba bold ffffff flexbetween radius"
					@click="jumpurl('/pages/tab4/kaoqindk/bukasqjl')" style="width: 45%;">
					<view class="">补卡申请记录</view>
					<u-icon name="arrow-right" color="#333" size="12"></u-icon>
				</view>
				<!-- <view class="xiaohei mainpadding_top ershiba bold ffffff flexbetween radius" style="width: 45%;">
					<view class="">在岗抽查</view>
					<u-icon name="arrow-right" color="#333" size="12"></u-icon>
				</view> -->
			</view>
		</template>
		<template v-if="show">
			<u-modal :show="show" title="拍照打卡" confirmColor="#ffb800" confirmText="确认" @confirm="daka()" cancelText="取消"
				@cancel="show=false" showCancelButton>
				<view class="slot-content" style="width: 730rpx;">
					<view class="flexcenter" @click="upimg">
						<view class="itemimgBox flexcenter margin_top2" v-if="dk_avatar">
							<!-- 已上传 -->
							<image class="radius listleftimg1" :src="dk_avatar_text" mode=""></image>
						</view>
						<view class="itemimgBox flexcenter margin_top2" v-if="!dk_avatar"><!-- 未上传 -->
							<image class="listleftimg1 radius" src="@/static/upimg.png" mode=""></image>
						</view>
					</view>
				</view>
			</u-modal>
		</template>
		
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				longitude: "",
				latitude: "",
				markers: [],
				circles: [],
				thetime: "",
				gettimeInterval: null,
				dataAll: {},
				polygons: [],
				show: false,
				dk_avatar: "",
				dk_avatar_text: "",
			}
		},
		onLoad() {
			this.thetime = this.formatTime(new Date())
			this.gettimeInterval = setInterval(() => {
				this.thetime = this.formatTime(new Date())
			}, 1000)
			this.getdkInfo()
		},
		onUnload() {
			clearInterval(this.gettimeInterval)
			this.gettimeInterval = null
		},
		onShow() {
			// #ifdef APP-PLUS
			this.getloaction()
			this.getdkqyInfo()
			// this.lianxian() //连线
			// #endif
		},
		methods: {
			upimg() {
				let that = this
				httpRequest.chooseImage(1, ['camera']).then(res => {
					for (var i = 0; i < res.length; i++) {
						that.uploadImageService(res[i])
					}
				})
			},
			// 详情转载
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					this.dk_avatar = res.url
					this.dk_avatar_text = res.fullurl
				}).catch(err => {});
			},
			getdkqyInfo() {
				httpRequest.request('/api/index/companyDetail', 'GET', {}).then(res => {
					let arr = []
					res.data.forEach(item => {
						let obj = {
							points: [],
							strokeWidth: 2,
							strokeColor: "#e6060a6A",
							fillColor: "#e6060a6A",
						}
						item.coordinates_text.forEach(cur => {
							obj.points.push({
								latitude: cur[1],
								longitude: cur[0],
							})
						})
						arr.push(obj)
					})
					this.polygons = arr
				}).catch(err => {})
			},
			// 点聚合，（连线）
			lianxian() {
				this.polygons = [{
					points: [{
							latitude: 34.41095,
							longitude: 112.599742,
						},
						{
							latitude: 34.41095,
							longitude: 112.545000,
						},
						{
							latitude: 34.815000,
							longitude: 113.550303,
						},
						{
							latitude: 34.818000, //纬度
							longitude: 113.545000, //经度
						},
						{
							latitude: 34.41095,
							longitude: 112.599742,
						},
					],
					strokeWidth: 2,
					strokeColor: "#e6060a6A",
					fillColor: "#e6060a6A",
				}]
			},
			startdaka() {
				httpRequest.request('/api/Companydk/checkUserDkArea', 'GET', {
					lat: this.latitude || 34.41095,
					lng: this.longitude || 112.599742,
				}).then(res => {
					if (res.code == 1) {
						this.show = true
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {})
			},
			daka() {
				if (this.dk_avatar == "") {
					httpRequest.toast("请拍照后打卡")
					return false
				}
				this.show = false
				let dk_avatar = this.dk_avatar
				this.dk_avatar = ""
				this.dk_avatar_text = ""
				httpRequest.request('/api/Companydk/userDk', 'GET', {
					id: this.dataAll.id,
					lat: this.latitude || 34.41095,
					lng: this.longitude || 112.599742,
					dk_avatar
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getdkInfo()
					}
				}).catch(err => {})
			},
			getdkInfo() {
				httpRequest.request('/api/Companydk/getDkinfo', 'GET', {
					lat: this.latitude || 34.41095,
					lng: this.longitude || 112.599742,
				}).then(res => {
					console.log(res.data);
					this.dataAll = res.data
				}).catch(err => {})
			},
			formatTime(date) {
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				// 将单个数字前面补充0
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				return hours + ':' + minutes;
			},
			getloaction() {
				let that = this
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				uni.getLocation({
					type: 'wgs64',
					success: function(res) {
						uni.hideLoading()
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						// let arr = [{ //在地图上显示圆
						// 	"latitude": that.latitude,
						// 	"longitude": that.longitude,
						// 	fillColor: "#e6060a6A", //填充颜色
						// 	color: "#e6060a6A", //描边的颜色
						// 	radius: 30000, //半径
						// 	strokeWidth: 2 //描边的宽度
						// }]
						// let circlesdata = []
						// arr.forEach(item => {
						// 	circlesdata.push({
						// 		"latitude": item.latitude,
						// 		"longitude": item.longitude,
						// 		fillColor: "#e6060a6A", //填充颜色
						// 		color: "#e6060a6A", //描边的颜色
						// 		radius: 3000, //半径
						// 		strokeWidth: 2 //描边的宽度
						// 	})
						// })
						// that.circles = circlesdata
						that.getMarker()
					},
					fail: function(info) {
						uni.hideLoading()
					}
				});
			},
			getMarker() {
				let marker = []
				marker.unshift({
					"id": "52525",
					"latitude": this.latitude,
					"longitude": this.longitude,
					"width": 15,
					"height": 15,
					"iconPath": "/static/tab4/currentposi.png",
					"callout": {}
				})

				this.markers = JSON.parse(JSON.stringify(marker))
			},
		}
	}
</script>

<style lang="scss" scoped>
	.yyztradius {
		border-radius: 50%;
		border: 15rpx solid #bc2a33;
	}

	.listleftimg1 {
		width: 140rpx;
		height: 140rpx;
		position: relative;
		image {
			width: 140rpx;
			height: 140rpx;
		}
	}
</style>